<template>
	<d2-container>
	<div class="form-area">
		<el-form ref="detailForm" label-width="110px">

			<div class="form-title">
				<h3>基本信息</h3>
			</div>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="调拨原因" prop="applyReason">
						<el-input v-model="allocationOrder.applyReason" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="调拨单编号" prop="orderNo">
						<el-input v-model="allocationOrder.orderNo" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="调出仓库" prop="repositoryNameOut">
						<el-input v-model="allocationOrder.repositoryNameOut" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="调入仓库" prop="repositoryNameIn">
						<el-input v-model="allocationOrder.repositoryNameIn" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="调拨日期" prop="applyDate">
						<el-input v-model="allocationOrder.applyDate" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="调拨状态" prop="allocationStatus">
						<el-select v-model="allocationOrder.allocationStatus" disabled style="width: 100%;">
							<el-option value="0" label="未处理"></el-option>
							<el-option value="1" label="已确定"></el-option>
							<el-option value="2" label="已撤销"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" :rows="2" v-model="allocationOrder.remark" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="form-title">
				<h3>审核信息</h3>
			</div>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="提交人" prop="submitor">
						<el-input v-model="allocationOrder.submitor" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="提交时间" prop="submitTime">
						<el-input v-model="allocationOrder.submitTime" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="审核人" prop="auditor">
						<el-input v-model="allocationOrder.auditor" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="审核时间" prop="auditTime">
						<el-input v-model="allocationOrder.auditTime" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="调拨状态" prop="auditStatus">
						<el-select v-model="allocationOrder.auditStatus" disabled style="width: 100%;">
							<el-option value="0" label="未提交"></el-option>
							<el-option value="1" label="待审核"></el-option>
							<el-option value="2" label="审核通过"></el-option>
							<el-option value="3" label="审核不通过"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input type="textarea" :rows="2" v-model="allocationOrder.remark" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="form-title">
			    <h3>系统信息</h3>
		    </div>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="创建时间" prop="createTime">
						<el-input v-model="allocationOrder.createTime" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="创建人" prop="creator">
						<el-input  v-model="allocationOrder.creator" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="width: 80%;">
				<el-col :span="12">
					<el-form-item label="编辑时间" prop="reviseTime">
						<el-input v-model="allocationOrder.reviseTime" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="编辑人" prop="reviser">
						<el-input  v-model="allocationOrder.reviser" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="form-title">
				<h3>调拨商品信息</h3>
			</div>
			<div class="order-sku-list">
				<el-table :data="detailTableData" stripe border style="width: 100%" >
					    <el-table-column type="index" fixed label="序号" width="50"></el-table-column>
						<el-table-column label="商品名称" prop="productName" width="200"></el-table-column>
						<el-table-column label="商品编码" prop="productCode" width="200"></el-table-column>
						<el-table-column label="SKU名称" prop="productSkuName" width="200"></el-table-column>
						<el-table-column label="SKU编码" prop="productSkuCode" width="200"></el-table-column>
						<el-table-column label="商品条码" prop="productBarCode" width="200"></el-table-column>
						<el-table-column label="可用库存数量" prop="stockQuantity" width="200"></el-table-column>
						<el-table-column label="单位" prop="unitName" ></el-table-column>
						<el-table-column label="调拨数量" prop="allocationQuantity" width="200"></el-table-column>
				</el-table>
			</div>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item>
						<div class="form-submit">
						<el-button v-if="allocationOrder.auditStatus==0 || allocationOrder.auditStatus == 3" class="form-cancle-btn" type="primary" @click="doSubmit()">提交</el-button>
						<el-button v-if="allocationOrder.auditStatus==1" @click="dialogVisible=true" class="form-submit-btn" type="primary">调拨审核</el-button>
						<el-button v-if="allocationOrder.auditStatus==2 && allocationOrder.allocationStatus == 0" @click="confirmAllocation()" class="form-submit-btn" type="primary">确定调拨</el-button>
						<el-button v-if="allocationOrder.auditStatus==2 && allocationOrder.allocationStatus == 0" @click="cancelAllocation()" class="form-submit-btn" type="primary">撤销</el-button>
						<el-button class="form-cancle-btn" @click="closePage">返回</el-button>
						</div>
					</el-form-item>

				</el-col>
			</el-row>
		</el-form>

		<el-dialog title="调拨审核" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<div class="form-area">
				<el-form ref="authForm" :model="authForm" :rules="rulesAuthForm" label-width="100px" style="height:auto">
					<el-row :gutter="20" style="margin-bottom: 2%;">
						<el-col :span="12">
							<el-form-item label="审核结果" prop="status">
								<el-radio-group v-model="authForm.status">
									<el-radio :label="2">审核通过</el-radio>
									<el-radio :label="3">审核不通过</el-radio>
								</el-radio-group>
							</el-form-item>

						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核说明" prop="authDesc">
								<el-input type="textarea" :rows="4" v-model="authForm.authDesc" placeholder="请输入审核说明"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<!-- <el-row :gutter="20">
						<el-col :span="4">审核说明：</el-col>
						<el-col :span="10">
							<el-input type="textarea" :rows="4" placeholder="请输入审核说明" v-model="auditDesc"></el-input>
						</el-col>
					</el-row> -->
				</el-form>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAudit">取 消</el-button>
				<el-button type="primary" @click="auditAllocation('authForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
	</d2-container>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { queryAllocationOrder, submitAllocationOrder, auditAllocationOrder, confirmAllocation, cancelAllocation } from '@api/allocation/allocation'
import dayjs from 'dayjs'
import { ossDomain } from '@api/sys.common'
export default {
  data () {
    return {
	  dialogVisible: false,
	  allocationOrderId: null,
	  allocationOrder: {},
	  detailTableData: [],

	  auditStatus: null,
	  auditDesc: null,

	  authForm: {
	    status: '',
	    authDesc: ''
	  },
	  rulesAuthForm: {
	    status: [{ required: true, message: '请选择审核结果', trigger: 'blur' }],
	    authDesc: [{ required: true, message: '请输入审核说明', trigger: 'blur' }, { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }]
	  }
    }
  },
  computed: {
	  ...mapState('d2admin/page', ['opened', 'current']) // 用户获取当前页面的地址，用于关闭
  },
  mounted () {
	  this.fetchData()
  },
  methods: {
    ...mapActions('d2admin/page', ['close']),

    fetchData () {
      if (this.allocationOrderId == 'undefined' || this.allocationOrderId == '') {
        this.$message({ message: '请重新打开页面', type: 'error' })
        return
      }

      queryAllocationOrder({ allocationOrderId: this.allocationOrderId }).then(res => {
        this.allocationOrder = res.data
        this.allocationOrder.applyDate = dayjs(this.allocationOrder.applyDate).format('YYYY-MM-DD')
        this.allocationOrder.createTime = dayjs(this.allocationOrder.createTime).format('YYYY-MM-DD HH:mm:ss')
        this.allocationOrder.reviseTime = dayjs(this.allocationOrder.reviseTime).format('YYYY-MM-DD HH:mm:ss')
        this.allocationOrder.submitTime = this.allocationOrder.submitTime == null ? '' : dayjs(this.allocationOrder.submitTime).format('YYYY-MM-DD HH:mm:ss')
        this.allocationOrder.auditTime = this.allocationOrder.auditTime == null ? '' : dayjs(this.allocationOrder.auditTime).format('YYYY-MM-DD HH:mm:ss')
        this.allocationOrder.allocationStatus = this.allocationOrder.allocationStatus + ''
        this.allocationOrder.auditStatus = this.allocationOrder.auditStatus + ''
        this.detailTableData = this.allocationOrder.allocationOrderDetails
        this.detailTableData.forEach(item => {
          item.thumbImage = ossDomain + item.thumbImage
        })
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    closePage () { // 关闭当前窗口
	  this.closeAudit()
	  let tagName = this.current
	  this.close({ tagName })
    },
    // 提交
    doSubmit () {
          this.loading = true
          submitAllocationOrder({id: this.allocationOrderId})
            .then(res => {
              if (res.code == '000000') {
                this.$message({ message: res.message, type: 'success' })
                this.loading = false
                this.closePage()
              } else {
                this.$message({ message: res.message, type: 'error' })
              }
            })
            .catch(err => {
              console.log('err', err)
              this.loading = false
            })
    },
    auditAllocation (formName) {
      this.$refs[formName].validate(valid => {
		  if (valid) {
			  if (this.allocationOrderId == 'undefined' || this.allocationOrderId == '') {
			    this.$message({ message: '请重新打开页面', type: 'error' })
            return
			  }

			  auditAllocationOrder({ allocationOrderId: this.allocationOrderId,
			    auditStatus: this.authForm.status,
			    auditDesc: this.authForm.authDesc
			  }).then(res => {
			    if (res.code == '000000') {
			      this.$message({
			        message: '调拨单审核提交成功',
			        type: 'success'
			      })
			      this.closeAudit()
			      this.closePage()
			      this.loading = false
			    } else {
			      this.$message({ message: res.message, type: 'error' })
			    }
			  }).catch(err => {
			    console.log('err', err)
			    this.loading = false
			  })
		  }
      })
    },
    closeAudit () {
      this.dialogVisible = false
      this.auditStatus = ''
      this.auditDesc = ''
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        }).catch(_ => {})
    },
    confirmAllocation () {
      if (this.allocationOrderId == 'undefined' || this.allocationOrderId == '') {
        this.$message({ message: '请重新打开页面', type: 'error' })
        return
      }

      confirmAllocation({ allocationOrderId: this.allocationOrderId }).then(res => {
        if (res.code == '000000') {
          this.$message({
            message: '确定调拨成功',
            type: 'success'
          })
          this.closePage()
          this.loading = false
        } else {
          this.$message({ message: res.message, type: 'error' })
        }
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    cancelAllocation () {
      if (this.allocationOrderId == 'undefined' || this.allocationOrderId == '') {
        this.$message({ message: '请重新打开页面', type: 'error' })
        return
      }

      cancelAllocation({ allocationOrderId: this.allocationOrderId }).then(res => {
        if (res.code == '000000') {
          this.$message({
            message: '撤销成功',
            type: 'success'
          })
          this.closePage()
          this.loading = false
        } else {
          this.$message({ message: res.message, type: 'error' })
        }
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    }
  },
  created () {
    this.allocationOrderId = sessionStorage.getItem('allocationOrderIdDetail')
  }
}
</script>

<style lang="scss" scoped>
.order-details {
	padding: 20px;
	.order-number {
		width: 100%;
		height: 60px;
		align-items: center;
		display: flex;
		border:#666 1px
		span {
			font-size: 14px;
			color: #333;
			margin: 30px 30px 30px 30px;
		}
	}

	.order-progress {
		width: 100%;
		align-items: center;
		display: flex;
		padding: 50px 0;
		.order-status {
			width: 250px;
			text-align: center;
			flex: 0 0 100px;
			h3 {
				font-size: 24px;
				color: #333;
			}
			p {
				font-size: 14px;
				color: #999;
				margin-top: 10px;
			}
		}
		.order-progress-bar {
			flex: 1 1 auto;
		}
	}

	.order-details-info {
		width: 100%;
		.table-list {
			p {
				font-size: 14px;
				color: #666;
				margin: 3px 0;
			}
		}
	}

	.order-sku-list {
		width: 100%;
		margin-top: 30px;
		.sku-info {
			width: 100%;
			display: flex;
			.sku-image {
				width: 80px;
				height: 80px;
				flex: 0 0 80px;
			}
			.sku-details {
				flex: 1 1 auto;
				h3 {
					font-size: 14px;
					color: #333;
					padding-left: 30px;
				}
				p {
					font-size: 14px;
					color: #999;
					margin-top: 4px;
					padding-left: 30px;
				}
			}
		}
		.sku-summary {
			border: #ebeef5 1px solid;
			border-top: none;
			justify-content: flex-end;
			display: flex;
			padding: 20px;
			.sku-summary-content {
				width: 240px;
				p {
					width: 100%;
					font-size: 14px;
					color: #333;
					justify-content: space-between;
					display: flex;
					margin: 5px 0;
				}
				span {
					font-size: 14px;
				}
				span.sku-summary-text {
					font-size: 18px;
					font-weight: bold;
					color: #ff5642;
				}
			}
		}
	}
}

::v-deep .el-table thead.is-group th {
	background: #fff!important;
}
.warning-text {
	color: #ff5642;
}
.success-text {
	color: #1aa57b;
}
</style>
